<script lang="ts" setup>
import SelectItem from './SelectItem.vue'
import type { SubCategoryList } from '@/typings/api'

const { subCategory } = defineProps<{
  show: boolean
  subCategory: SubCategoryList[]
}>()

defineEmits<{
  (e: 'update:show', value: boolean): void
}>()

const { categoryState } = storeToRefs(useCategory())

const active = computed(() => {
  return !categoryState.value?.categoryId || categoryState.value?.categoryId === -1
})
</script>

<template>
  <view v-show="show">
    <view class="select">
      <SelectItem :id="-1" title="全部" :active="active" @click="$emit('update:show', false)" />
      <SelectItem
        v-for="item in subCategory"
        :id="item?.id"
        :key="item.id"
        :title="item?.name || ''"
        :active="categoryState?.categoryId === item?.id"
        @click="$emit('update:show', false)"
      />
    </view>
    <!-- 阴影 -->
    <view class="shade" @click="$emit('update:show', false)" />
  </view>
</template>

<style lang="scss" scoped>
.select {
  left: 0;
  z-index: 3;
  padding: 0 35rpx;
  top: 90rpx;
  position: absolute;
  background-color: white;
  border-bottom-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;

  padding-top: 12rpx;
  width: 100%;
  box-sizing: border-box;
}

.shade {
  left: 0;
  z-index: 2;
  top: 90rpx;
  width: 100%;
  height: 100vh;
  position: absolute;
  background: rgba($color: #555555, $alpha: 0.25);

  transition: opacity 0.3s;
}
</style>
